<!-- 添加文章页面 -->
<template>
	<div>
		<a-card>
			<h4 style="margin-left: 10px;color: #d6a20f;text-align: center;">{{id? '编辑文章':'写文章'}}</h4>
			<a-form-model :model="artInfo" ref="artInfoRef" :rules="artInfoRules" :hideRequiredMark="true">
				<!-- 标题 -->
				<a-form-model-item label="文章标题" prop="title">
					<a-input v-model="artInfo.title"></a-input>
				</a-form-model-item>
				<!-- 分类 -->
				<a-form-model-item label="文章分类" prop="cid">
					<a-select v-model="artInfo.cid" @change="cateChange" placeholder="请选择分类">
						<a-select-option v-for="cate in cateList" :key="cate.id" :value="cate.id">
							{{cate.name}}
						</a-select-option>
					</a-select>
				</a-form-model-item>
				<!-- 原创标记 -->
				<a-form-model-item label="原创标记" prop="flag">
					<a-input v-model="artInfo.flag"></a-input>
				</a-form-model-item>
				<!-- 描述 -->
				<a-form-model-item label="文章描述" prop="desc">
					<a-textarea v-model="artInfo.desc"></a-textarea>
				</a-form-model-item>
				<!-- 文章内容 -->
				<a-form-model-item label="文章内容" prop="content">
					<div style="height: 600px;">
						<!-- Markdown编辑器 -->
						<mavon-editor v-model="artInfo.content" :toolbars="toolbars" :codeStyle="codeStyle"
							ref=artContentMd @imgAdd="handleImgAdd" @imgDel="handleImgDel" placeholder="编辑文章内容..."
							style="height:100%;z-index: 999;font-size: 16px;" />
					</div>

				</a-form-model-item>
				<!-- 提交 -->
				<a-form-model-item>
					<a-button type="primary" style="margin: 0 10px 0 0 ;" @click="artSubmit(artInfo.id)">
						提交
					</a-button>
					<a-button type="danger" style="margin: 0 10px;" @click="addCancel()">取消</a-button>
				</a-form-model-item>
			</a-form-model>
		</a-card>
	</div>
</template>

<script>
	export default {
		props: ['id'],
		data() {
			return {
				artInfo: {
					id: 0,
					title: '',
					cid: undefined,
					flag: '',
					desc: '',
					content: '',
				},
				cateList: [],

				// 表单验证
				artInfoRules: {
					title: [
						{ required: true, message: "请输入文章标题", trigger: "blur" },
					],
					cid: [
						{ required: true, message: "请选择文章分类", trigger: "change" },
					],
					flag: [
						{ required: true, message: "请输入文章标记", trigger: "blur" },
					],
					desc: [
						{ required: true, message: "请输入文章描述", trigger: "blur" },
						{ max: 120, message: "文章描述最多20个字符", trigger: "change" },
					],
					content: [
						{ required: true, message: "请输入文章内容", trigger: "blur" },
					],
				},

				// Markdown工具栏配置
				toolbars: {
					bold: true, // 粗体
					italic: true, // 斜体
					header: true, // 标题
					underline: true, // 下划线
					mark: true, // 标记
					superscript: true, // 上角标
					quote: true, // 引用
					ol: true, // 有序列表
					link: true, // 链接
					imagelink: true, // 图片链接
					help: true, // 帮助
					code: true, // code
					subfield: true, // 是否需要分栏
					fullscreen: true, // 全屏编辑
					readmodel: true, // 沉浸式阅读
					undo: true, // 上一步
					trash: true, // 清空
					save: true, // 保存（触发events中的save事件）
					navigation: true, // 导航目录
					alignleft: false, // 左对齐
					aligncenter: false, // 居中
					alignright: false, // 右对齐
					subfield: false, // 单双栏模式
					preview: false, // 预览
				},
				// markdown编辑器代码样式 monokai-sublime
				codeStyle: "atom-one-light",//主题

			}
		},
		//生命周期 - 创建完成（访问当前this实例）
		created() {
			this.getCateList();
			if (this.id) {
				this.getArtInfo(this.id);
			}
		},
		//生命周期 - 挂载完成（访问DOM元素）
		mounted() {

		},
		//方法集
		methods: {
			//查询文章信息
			async getArtInfo(id) {
				const { data: res } = await this.$axios.get(`/article/${id}`);
				if (res.status != 200) {
					return this.$message.error(res.message);
				}
				this.artInfo = res.data;
				this.artInfo.id = res.data.ID;
			},

			// 获取分类列表
			async getCateList() {
				const { data: res } = await this.$axios.get('categories');
				if (res.status != 200) {
					return this.$message.error(res.message);
				}
				this.cateList = res.data;
			},

			//分类选择
			cateChange(val) {
				this.artInfo.cid = val;
			},

			//提交(更新)文章
			artSubmit(id) {
				this.$refs.artInfoRef.validate(async (valid) => {
					if (id == 0) {  //添加文章
						const { data: res } = await this.$axios.post("/article/add", this.artInfo);
						if (res.status != 200) {
							return this.$message.error(res.message);
						}
						this.$router.push("/artlist");
						this.$message.success("添加文章成功");
					} else {  //更新文章
						const { data: res } = await this.$axios.put(`/article/${id}`, this.artInfo);
						if (res.status != 200) {
							return this.$message.error(res.message);
						}
						this.$router.push("/artlist");
						this.$message.success("更新文章成功");
					}
				});
			},

			// 取消
			addCancel() {
				this.$refs.artInfoRef.resetFields();
			},

			// Markdown编辑器内容改变
			// change(value, render) {
			//     this.html = render;
			//     this.artInfo.content = value;
			//     this.artInfo.content = render;
			// },

			// 处理Markdown编辑器图片上传
			handleImgAdd(pos, $file) {
				// 第一步.将图片上传到服务器
				var formdata = new FormData();
				formdata.append('file', $file);
				this.$axios.post("/upload", formdata, {
					headers: {
						'Content-Type': 'multipart/form-data',
					}
				}).then(res => {
					// console.log("res:" , res);
					var url = res.data.url;
					// 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
					this.$refs.artContentMd.$img2Url(pos, url);
				});
			},

			// 处理Markdown编辑器图片删除
			handleImgDel() {
				console.log("处理图片删除");
			},
		}
	}
</script>
<style>


</style>